<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
<style type="text/css">
/*set a border on the images to prevent shifting*/
#gallery_01 img {
	border: 2px solid white;
} /*Change the colour*/
.active img {
	border: 2px solid #333 !important;
}
</style>
</head>
<body>
	<img id="img_01" src="images/small/image1.png"
		data-zoom-image="images/large/image1.jpg" />
	<div id="gal1">
		<a href="#" data-image="images/small/image1.png"
			data-zoom-image="images/large/image1.jpg"> <img id="img_01"
			src="images/thumb/image1.jpg" />
		</a> <a href="#" data-image="images/small/image2.png"
			data-zoom-image="images/large/image2.jpg"> <img id="img_01"
			src="images/thumb/image2.jpg" />
		</a> <a href="#" data-image="images/small/image3.png"
			data-zoom-image="images/large/image3.jpg"> <img id="img_01"
			src="images/thumb/image3.jpg" />
		</a> <a href="#" data-image="images/small/image4.png"
			data-zoom-image="images/large/image4.jpg"> <img id="img_01"
			src="images/thumb/image4.jpg" />
		</a>
	</div>
	<script>
		//initiate the plugin and pass the id of the div containing gallery images 
		$("#zoom_03").elevateZoom({
			gallery : 'gallery_01',
			cursor : 'pointer',
			galleryActiveClass : 'active',
			imageCrossfade : true,
			loadingIcon : 'http://www.elevateweb.co.uk/spinner.gif'
		});
		//pass the images to Fancybox 
		$("#zoom_03").bind("click", function(e) {
			var ez = $('#zoom_03').data('elevateZoom');
			$.fancybox(ez.getGalleryList());
			return false;
		});
	</script>
</body>
</html>